@import '../styles/index.less';

.alert-color(@background,@color) {
  color: @color;
  background-color: @background;
}

.alert {
  display: block;
  width: @alert-width;
  .alert-color(@primary, @white);
  border-radius: @alert-border-radius;
  border-width: @border-width;
  border-style: solid;
  padding: @btn-padding-y @btn-padding-x;

  h4.alert-title {
    margin-top: 0;
    margin-bottom: 0;
    line-height: @alert-line-height;
    font-size: @alert-title-font-size;
  }
  p.alert-message {
    margin-top: 0;
    margin-bottom: 0;
    line-height: @alert-line-height;
    font-size: @alert-message-font-size;
  }

  position: relative;
  > i:last-child {
    position: absolute;
    right: @alert-icon-right;
    top: @alert-icon-top;
    font-style: normal;
    cursor: pointer;
    font-weight: @alert-icon-font-weight;
    font-size: @alert-icon-font-size;
  }
}

.alert-success {
  .alert-color(@success, @white);
}
.alert-danger {
  .alert-color(@danger, @white);
}
.alert-warning {
  .alert-color(@warning, @white);
}
